<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)"><view slot="navbar-center">滑块验证</view></w-navbar>
		<w-topTips ref="topTips"></w-topTips>
		<pageDemoBlock title="基本用法" color="#1c87e4">
			<view style="display: flex;justify-content: center;"><w-sliderValidate ref="sliderVerification" @success="sliderVerificationSuccess"></w-sliderValidate></view>
		</pageDemoBlock>
		<pageDemoBlock title="图片验证" color="#e45c1d">
			<view style="display: flex;justify-content: center;">
				<w-sliderValidate ref="sliderVerification" :imgSrc="imgSrc" @success="sliderVerificationSuccess"></w-sliderValidate>
			</view>
		</pageDemoBlock>
		
		<pageDemoBlock title="自定义图片大小/滑块大小/滑块颜色/滑块拖拽颜色" color="#e43011">
			<view style="display: flex;justify-content: center;">
				<w-sliderValidate ref="sliderVerification" imgWidth="600" imgHeight="300" sliderWidth="80" sliderBackground="#33DF9F"  dragBackground="#a5dfd7" :imgSrc="imgSrc2" @success="sliderVerificationSuccess"></w-sliderValidate>
			</view>
		</pageDemoBlock>
		<view class="p-2"><w-button @click="refresh">刷新</w-button></view>
	</view>
</template>

<script>
import pageDemoBlock from '@/components/page-demo-block';
export default {
	components: { pageDemoBlock },
	data() {
		return {
			imgSrc: 'https://iknow-pic.cdn.bcebos.com/6a600c338744ebf870cfb0c8d9f9d72a6159a78f?x-bce-process%3Dimage%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_jpg',
			imgSrc2:'https://iknow-pic.cdn.bcebos.com/6a63f6246b600c33ef8b0a3f1a4c510fd8f9a153?x-bce-process%3Dimage%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_jpg'
		};
	},
	methods: {
		sliderVerificationSuccess() {
			this.$refs.topTips.show({
				type: 'success',
				duration: 1500,
				title: '验证通过!'
			});
		},
		refresh() {
			this.$refs.sliderVerification.init();
		}
	}
};
</script>

<style lang="scss" scoped></style>
